import React, {FC, useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Popconfirm, Select, Table, Tooltip} from "antd";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import api from "../../../api";
import BreadcrumbPath from "../../../components/BreadcrumbPath";

const Class: FC<any> = ({MobxData}) => {
    const [dataSource, setDataSource] = useState<Array<any>>([]);
    // 学科信息
    const {subjectList, getSubjectList, changeSubjectList} = MobxData;
    //班级信息
    const {classList, getClassList, changeClassList} = MobxData;
    // 对话框是否可见
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 对话框title
    const [ModalTitle, setModalTitle] = useState("");
    const [form] = Form.useForm();

    // 表头内容
    const columns = [
        {
            title: '班级名称',
            dataIndex: 'name',
            key: 'name',
            width: 'auto',
        },
        {
            title: '所属学科',
            dataIndex: 'subject',
            key: 'subject',
            width: 'auto',
        },
        {
            title: '任课老师',
            dataIndex: 'teacher',
            key: 'teacher',
            width: 'auto',
        },
        {
            title: '班主任',
            dataIndex: 'headteacher',
            key: 'headteacher',
            width: 'auto',
        },
        {
            title: '操作',
            key: 'action',
            width: '200px',
            render: (text: any, record: any, index: any) => {
                return (
                    <div style={{color: "#409eff"}}>
                    <span style={{margin: "0 10px", cursor: "pointer"}} onClick={() => {
                        setModalTitle("编辑班级");
                        form.setFieldsValue(record)
                        setIsModalVisible(true);
                    }}>修改</span>
                        <Popconfirm
                            title="确定要删除吗?"
                            onConfirm={() => {
                                // console.log("删除");
                                // 删除班级
                                api.delClass({id: record.key}).then(res => {
                                    message.success(res.msg);
                                }).catch(err => {
                                    message.error(err.msg);
                                })
                                // 更新数据
                                getClassList()
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span style={{margin: "0 10px", cursor: "pointer"}}>删除</span>
                        </Popconfirm>
                    </div>
                )
            }
        }
    ];

    useEffect(() => {
        getSubjectList();
        getClassList();
    }, [])
    useEffect(() => {
        // 拼装表格数据
        setDataSource(classList.map((item: any) => ({
            key: item._id,
            name: item.name,
            subject: item.subject,
            teacher: item.teacher,
            headteacher: item.headteacher,
        })))
    }, [classList])

    const handleOk = () => {
        // 验证表单
        form.validateFields().then(values => {
            if (ModalTitle === "编辑班级") {
                values.id = form.getFieldValue("key")
                // console.log(values);
                // 更新班级
                api.upClass(values).then(res => {
                    message.success(res.msg);
                }).catch(err => {
                    message.error(err.msg);
                })
            } else if (ModalTitle === "添加班级") {
                // console.log(values);
                // 添加班级
                api.addClass(values).then(res => {
                    message.success(res.msg);
                }).catch(err => {
                    message.error(err.msg);
                })
            }
            // 更新数据
            getClassList()
            // 关闭对话框
            setIsModalVisible(false)
        }).catch(err => {
        })
    }


    return (
        <div>
            {/*<h1>班级管理</h1>*/}
            <BreadcrumbPath/>
            <Button type="primary" size="large" onClick={() => {
                setModalTitle("添加班级");
                form.setFieldsValue({
                    name: "",
                    subject: "",
                    teacher: "",
                    headteacher: "",
                });
                setIsModalVisible(true);
            }}>添加班级</Button>
            <Input type="search" placeholder="输入您想要搜索的关键词" onChange={(e) => {
                const searchContent = e.target.value;
                setDataSource(
                    classList
                        .map((item: any) => ({
                            key: item._id,
                            name: item.name,
                            subject: item.subject,
                            teacher: item.teacher,
                            headteacher: item.headteacher,
                        }))
                        .filter((item: any) => {
                            if (searchContent === '' || item.name.includes(searchContent) || item.subject.includes(searchContent) || item.teacher.includes(searchContent) || item.headteacher.includes(searchContent)) {
                                return true
                            }
                        }))
            }}
                   style={{width: "300px", height: "40px", marginLeft: "10px"}}/>
            <Table dataSource={dataSource} columns={columns} sticky
                   pagination={{
                       pageSize: 8,
                       hideOnSinglePage: true,
                       responsive: true,
                       position: ["bottomCenter"],
                       showQuickJumper: true
                   }}/>
            <Modal title={ModalTitle} okText="提交" cancelText="取消" visible={isModalVisible} onOk={handleOk}
                   onCancel={() => {
                       setIsModalVisible(false)
                   }}>
                <Form
                    name="basic"
                    form={form}
                    layout='vertical'
                >
                    <Form.Item
                        label="班级名称"
                        name="name"
                        rules={[{required: true, message: '班级名称不能为空!'}]}
                    >
                        <Input placeholder="请输入班级名称"/>
                    </Form.Item>
                    <Form.Item
                        label="所属学科"
                        name="subject"
                        rules={[{required: true, message: '所属学科不能为空!'}]}
                    >
                        <Select placeholder="请选择所属学科" style={{width: 120}} onChange={() => {
                        }}>
                            {
                                subjectList.map((item: any) => {
                                    return <Select.Option value={item.name} key={item._id}>{item.name}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="任课老师"
                        name="teacher"
                        rules={[{required: true, message: '任课老师不能为空!'}]}
                    >
                        <Input placeholder="请输入任课老师名称"/>
                    </Form.Item>
                    <Form.Item
                        label="班主任"
                        name="headteacher"
                        rules={[{required: true, message: '班主任不能为空!'}]}
                    >
                        <Input placeholder="请输入班主任名称"/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default inject('MobxData')(observer(Class));